<!DOCTYPE html>
<html>
<head>
<title>WhiteIt!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="Libs/bootstrap/css/bootstrap.css" rel="stylesheet" media="screen" />
<link href="client.css" rel="stylesheet" />
<link rel="shortcut icon" href="/favicon.ico" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet" />
</head>
<body style="display: none" data-bind="visible: true">
	<!-- Header bar -->
	<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">WhiteIt!</a>
			</div>
			<div class="navbar-collapse collapse">
				<div class="navbar-form navbar-right" data-bind="visible: currentUser() != ''">
					<!-- TODO -->
					<span class="navbar-message">Hi <span data-bind="text: currentUser()"></span>, you are logged in!
					</span>
					<button data-bind="click: function() { $root.showBox('NewComment') },
									   visible: currentPage() == 'LinkDetail'" class="btn btn-success">New Comment</button>
					<button data-bind="click: function() { $root.showBox('NewLink') }" class="btn btn-success">New Link</button>
					<button data-bind="click: function() { $root.logout() }" class="btn btn-success">Logout</button>
				</div>
				<form class="navbar-form navbar-right" role="form" data-bind="visible: currentUser() == ''">
					<div class="form-group">
						<input type="text" data-bind="value: name" placeholder="User" class="form-control">
					</div>
					<div class="form-group">
						<input type="password" data-bind="value: password" placeholder="Password" class="form-control">
					</div>
					<button data-bind="click: function() { $root.login() }" class="btn btn-success">Sign in</button>
					<button data-bind="click: function() { $root.showBox('Register') }" class="btn btn-success">Register</button>
				</form>
			</div>
			<!--/.navbar-collapse -->
		</div>
	</div>

	<div style="padding-top: 51px;">
		<!-- Messages -->
		<div data-bind="fadeVisible: currentMessage() != ''">
			<div class="jumbotron messages" data-bind="css: { 'info': currentMessageType() == 'info', 'warning': currentMessageType() == 'warning', 'error': currentMessageType() == 'error'}">
				<div class="container">
					<span data-bind="text: currentMessage()"></span>
				</div>
			</div>
		</div>


		<!-- Top Boxes -->
		<!-- New Link -->
		<div class="jumbotron topBox" data-bind="fadeVisible: currentBox() == 'NewLink'">
			<div class="container">
				<button data-bind="click: function() { $root.closeBox(); }" class="btn" style="font-weight: bold; float: right">X</button>

				<form role="form">
					<h2>New Link</h2>
					<div class="form-group">
						<input type="text" data-bind="value: newLinkTitle" placeholder="Title" class="form-control"></input>
					</div>
					<div class="form-group">
						<input type="text" data-bind="value: newLinkUrl" placeholder="Url" class="form-control"></input>
					</div>
					<button data-bind="click: function() { $root.createLink() }" class="btn btn-success">Create Link</button>
				</form>
			</div>
		</div>

		<!-- Register -->
		<div class="jumbotron topBox" data-bind="fadeVisible: currentBox() == 'Register'">
			<div class="container">
				<button data-bind="click: function() { $root.closeBox(); }" class="btn" style="font-weight: bold; float: right">X</button>

				<form role="form">
					<h2>Register</h2>
					<div class="form-group">
						<input type="text" data-bind="value: newUsername" placeholder="Username" class="form-control"></input>
					</div>
					<div class="form-group">
						<input type="password" data-bind="value: newPassword" placeholder="Password" class="form-control"></input>
					</div>
					<div class="form-group">
						<input type="password" data-bind="value: newPasswordRepeat" placeholder="Repeat Password" class="form-control"></input>
					</div>
					<button data-bind="click: function() { $root.register() }" class="btn btn-success">Register</button>
				</form>

			</div>
		</div>

		<!-- New Comment -->
		<div class="jumbotron topBox" data-bind="fadeVisible: currentBox() == 'NewComment'">
			<div class="container">
				<button data-bind="click: function() { $root.closeBox(); }" class="btn" style="font-weight: bold; float: right">X</button>

				<form role="form">
					<h2>New Comment</h2>
					<div class="form-group">
						<textarea maxlength="300" data-bind="value: newLinkComment" placeholder="Comment (max. 300 chars)" class="form-control" style="resize: none;"></textarea>
					</div>
					<button data-bind="click: function() { $root.createComment() }" class="btn btn-success">Create Comment</button>
				</form>
			</div>
		</div>
	</div>

	<!-- All Links view -->
	<div class="jumbotron" data-bind="visible: currentPage() == 'AllLinks'">
		<div class="container">
			<div data-bind="foreach: entries">
				<div class="linkEntry">
					<div class="vote">
						<img data-bind="style: { opacity: $root.currentUser() != '' ?  '' : 0.2 }, click: function() { $root.vote($data.id, 'up') }, attr: {src: $root.getVoteImg($data, 'up')}" /> <span data-bind="text: $data.rating.value"></span> <img
							data-bind="style: { opacity: $root.currentUser() != '' ?  '' : 0.2 }, click: function() { $root.vote($data.id, 'down') }, attr: {src: $root.getVoteImg($data, 'down')}"
						/>
					</div>
					<h1>
						<a data-bind="attr: { href: $data.url }" target="_blank"><span data-bind="text: $data.title"></span></a>
					</h1>
					<p>
						Created by <span data-bind="text: $data.author"></span> on <span data-bind="text: $data.createTimeDisplay"></span>
					</p>
					<p>
						<a data-bind="click: function() { $root.viewLinkDetail($data.id) }"> <span data-bind="text: $data.comments.length"></span> Comments
						</a>
					</p>
					<hr />
				</div>
			</div>
		</div>
	</div>

	<!-- Link Detail -->
	<div class="jumbotron" data-bind="visible: currentPage() == 'LinkDetail'">
		<div class="container">

			<div data-bind="with: $root.currentEntry()">

				<div class="linkEntry">
					<div class="vote">
						<img data-bind="style: { opacity: $root.currentUser() != '' ?  '' : 0.2 }, click: function() { $root.vote($data.id, 'up') }, attr: {src: $root.getVoteImg($data, 'up')}" /> <span data-bind="text: $data.rating.value"></span> <img
							data-bind="style: { opacity: $root.currentUser() != '' ?  '' : 0.2 }, click: function() { $root.vote($data.id, 'down') }, attr: {src: $root.getVoteImg($data, 'down')}"
						/>
					</div>
					<h1>
						<a data-bind="attr: { href: $data.url }" target="_blank"><span data-bind="text: $data.title"></span></a>
					</h1>
					<p>
						Created by <span data-bind="text: $data.author"></span> on <span data-bind="text: $data.createTimeDisplay"></span>
					</p>
					<hr />
				</div>

				<div class="linkComment" data-bind="foreach: comments">
					<div class="linkEntry">
						<div class="vote">
							<img data-bind="style: { opacity: $root.currentUser() != '' ?  '' : 0.2 }, click: function() { $root.voteComment($data.id, 'up') }, attr: {src: $root.getVoteImg($data, 'up')}" /> <span data-bind="text: $data.rating.value"></span> <img
								data-bind="style: { opacity: $root.currentUser() != '' ?  '' : 0.2 }, click: function() { $root.voteComment($data.id, 'down') }, attr: {src: $root.getVoteImg($data, 'down')}"
							/>
						</div>
						<h1>
							<a data-bind="attr: { href: $data.url }" target="_blank"><span data-bind="text: $data.title"></span></a>
						</h1>
						<p>
							Created by <span data-bind="text: $data.author"></span> on <span data-bind="text: $data.createTimeDisplay"></span>
						</p>
						<p class="linkCommentText">
							<span data-bind="text: $data.text"></span>
						</p>
						<hr />
					</div>
				</div>

			</div>


		</div>
	</div>

	<footer>
		<p>&copy; WhiteIt! 2013</p>
	</footer>
	<!-- /container -->


	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->

	<script src="Libs/jquery-2.0.3.js"></script>
	<script src="Libs/bootstrap/js/bootstrap.min.js"></script>
	<script src="Libs/knockout-3.0.0.js"></script>
	<script src="Libs/sammy.js"></script>

	<script src="/socket.io/socket.io.js"></script>
	<script src="core.js"></script>
	<script src="dataService.js"></script>
	<script src="init.js"></script>
	<script src="ViewModel.js"></script>
</body>
</html>
